<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSBA</title>
    <style>
        body {
            background-color: green;
            text-align: center;
        }

        button {
            height: 30px;
            width: 100px;
        }

        pre {
            background-color: #f4f4f4;
            padding: 10px;
            border: 1px solid #ccc;
            text-align: left;
        }
    </style>
</head>

<body>
    <h1>Just code your JSBA now!</h1>
    <textarea id="mytext" rows="10" cols="80"></textarea>
    <br>
    <button id="mybutton" onclick="hi()">Run now</button>
    <pre id="output"></pre>
    <script>
        const textarea = document.getElementById('mytext');
        const button = document.getElementById('mybutton');
        const output = document.getElementById('output');

        function hi() {
            const text = textarea.value;
            const lines = text.split('\n');
            const lineCount = lines.length;
            let htmlContent = '';
            let styleContent = {};
            let JSContent = '';

            for (let i = 0; i < lineCount; i++) {
                let nei = lines[i].trim();
                if (!nei || nei.startsWith('#:')) continue;

                const parts = nei.split(':');
                if (parts.length === 2) {
                    const start = parts[0].trim();
                    const end = parts[1].trim();
                    switch (start) {
                        case "world":
                            htmlContent += `<p>${end}</p>`;
                            break;
                        case "li":
                            htmlContent += `<li>${end}</li>`;
                            break;
                        case "div-end":
                            htmlContent += `</div>`;
                            break;
                        case "div-start":
                            htmlContent += `<div id="${end}">`;
                            break;
                        case "ul-start":
                            htmlContent += `<ul>`;
                            break;
                        case "ol-start":
                            htmlContent += `<ol>`;
                            break;
                        case "ul-end":
                            htmlContent += `</ul>`;
                            break;
                        case "ol-end":
                            htmlContent += `</ol>`;
                            break;
                        case "li-size":
                            addStyle(styleContent, 'li', `font-size:${end};`);
                            break;
                        case "li-color":
                            addStyle(styleContent, 'li', `color:${end};`);
                            break;
                        case "world-size":
                            addStyle(styleContent, 'p', `font-size:${end};`);
                            break;
                        case "world-color":
                            addStyle(styleContent, 'p', `color:${end};`);
                            break;
                        case "title-size":
                            addStyle(styleContent, 'h1', `font-size:${end};`);
                            break;
                        case "title-color":
                            addStyle(styleContent, 'h1', `color:${end};`);
                            break;
                        case "title":
                            htmlContent += `<h1>${end}</h1>`;
                            break;
                        case "smalltitle-size":
                            addStyle(styleContent, 'h2', `font-size:${end};`);
                            break;
                        case "smalltitle-color":
                            addStyle(styleContent, 'h2', `color:${end};`);
                            break;
                        case "smalltitle":
                            htmlContent += `<h2>${end}</h2>`;
                            break;
                        case "bodycolor":
                            addStyle(styleContent, 'body', `background-color: ${end};`);
                            break;
                        case "alltext-center":
                            addStyle(styleContent, 'body', `text-align: center;`);
                            break;
                        case "line-center":
                            addStyle(styleContent, 'body', `display: block; margin: 0 auto;`);
                            break;
                        case "other":
                            htmlContent += end;
                            break;
                        case "other-css":
                            Object.entries(parseStyle(end)).forEach(([selector, styles]) => {
                                addStyle(styleContent, selector, styles);
                            });
                            break;
                        case "other-js":
                            JSContent += end;
                            break;
                        default:
                            htmlContent += `<p>${nei}</p>`;
                    }
                } else if (parts.length === 3 && parts[0].trim() === "a") {
                    const href = parts[1].trim();
                    const text = parts[2].trim();
                    htmlContent += `<a href="${href}">${text}</a>`;
                } else if (parts.length === 5 && parts[0].trim() === "photo") {
                    const href = parts[1].trim();
                    const text = parts[2].trim();
                    const width = parts[3].trim();
                    const height = parts[4].trim();
                    const validWidth = /^\d+(\.\d+)?(px|em|rem|%)?$/.test(width) ? width : 'auto';
                    const validHeight = /^\d+(\.\d+)?(px|em|rem|%)?$/.test(height) ? height : 'auto';
                    htmlContent += `<img src="${href}" alt="${text}" width="${validWidth}" height="${validHeight}">`;
                } else if (parts.length === 4 && parts[0].trim() === "input") {
                    const id = parts[1].trim();
                    const width = parts[2].trim();
                    const height = parts[3].trim();
                    htmlContent += `<input style="width:${width}; height:${height};" id="${id}">`;
                } else {
                    htmlContent += `<p>${nei}</p>`;
                }
            }

            const finalStyleContent = Object.entries(styleContent).map(([selector, styles]) => {
                return `${selector} { ${styles} }`;
            }).join('\n');

            const closingScriptTag = '<' + '/script>';
            let fullHtml = `<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>This is a website</title>
    <style>
        ${finalStyleContent}
    </style>
</head>
<body>
    ${htmlContent}
    <script>
        ${JSContent}
    ${closingScriptTag}
</body>
</html>`;

            output.textContent = fullHtml;
        }

        function addStyle(styleObj, selector, style) {
            if (!styleObj[selector]) {
                styleObj[selector] = '';
            }
            styleObj[selector] += style;
        }

        function parseStyle(css) {
            const result = {};
            const rules = css.split('}').filter(rule => rule.trim());
            rules.forEach(rule => {
                const parts = rule.split('{');
                const selector = parts[0].trim();
                const styles = parts[1].trim();
                result[selector] = styles;
            });
            return result;
        }
    </script>
</body>

</html>